<!--  -->
<template>
  <div>
    <div class="video_container">
      <div>
        <video controls autoplay :src="url"></video>
      </div>
      <div class="creator_info">
        <div class="name">
          <div>{{ creator.nickname + "-" + videoInfo.title }}</div>
          <div
            v-if="!isCollect"
            @click="collect(videoInfo.vid, 1)"
            class="iconfont icon-xihuan like"
          ></div>
          <div
            v-else
            @click="collect(videoInfo.vid, 2)"
            class="iconfont icon-xihuan1"
          ></div>
        </div>
        <div class="timer">
          <span>{{
            videoInfo.playTime > 100000
              ? Math.floor(videoInfo.playTime / 100000) + "万"
              : videoInfo.playTime
          }}</span>
          <span>-</span>
          <span>{{ videoInfo.publishTime | dateFormats }}</span>
        </div>
      </div>
      <div class="video_more">
        <div class="title">相关推荐</div>
        <div class="video_wrap">
          <div class="item_wrap" v-for="(item, index) in result" :key="index">
            <div class="item">
              <div class="cover">
                <el-image
                  @click="toDetail(item.vid)"
                  :src="item.coverUrl"
                  fit="cover"
                ></el-image>
              </div>
              <div class="title">{{ item.title }}</div>
              <div class="name">{{ item.creator[0].userName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="comment-wrapper">
      <div class="title">
        评论 <span>({{ videoInfo.commentCount }})</span>
      </div>

      <div class="comment-wrap">
        <ul v-show="hotCommentLength > 0">
          <p>热门评论:</p>
          <li v-for="(item, index) in comment.hotComments" :key="index">
            <div @click="toUser(item.user.userId)" class="cover">
              <img :src="item.user.avatarUrl" alt="" />
            </div>
            <div class="content">
              <div class="user-name">{{ item.user.nickname }}</div>
              <div class="info">{{ item.content }}</div>
              <div class="footer">
                <div class="time">{{ item.time | dateFormat }}</div>
                <div class="button">
                  <el-button
                    :disabled="loginStatus !== 'true'"
                    v-if="!item.liked"
                    @click="getHotCommentLike(item.commentId, 1, index)"
                    icon="iconfont icondianzan"
                    circle
                  >
                    {{ item.likedCount }}</el-button
                  >
                  <el-button
                    :disabled="loginStatus !== 'true'"
                    v-else
                    @click="getHotCommentLike(item.commentId, 0, index)"
                    icon="iconfont iconicon_goodfill active"
                    circle
                  >
                    {{ item.likedCount }}</el-button
                  >
                  <el-button icon="iconfont iconfenxiang" circle></el-button>
                  <el-button icon="iconfont iconpinglun" circle></el-button>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <ul v-show="commentsLength > 0">
          <p>全部评论:</p>
          <li v-for="(item, index) in comment.comments" :key="index">
            <div @click="toUser(item.user.userId)" class="cover">
              <img :src="item.user.avatarUrl" alt="" />
            </div>
            <div class="content">
              <div class="user-name">{{ item.user.nickname }}</div>
              <div class="info">{{ item.content }}</div>
              <div class="footer">
                <div class="time">{{ item.time | dateFormat }}</div>
                <div class="button">
                  <el-button
                    :disabled="loginStatus !== 'true'"
                    v-if="!item.liked"
                    @click="getCommentLike(item.commentId, 1, index)"
                    icon="iconfont icondianzan"
                    circle
                  >
                    {{ item.likedCount }}</el-button
                  >
                  <el-button
                    :disabled="loginStatus !== 'true'"
                    v-else
                    @click="getCommentLike(item.commentId, 0, index)"
                    icon="iconfont iconicon_goodfill active"
                    circle
                  >
                    {{ item.likedCount }}</el-button
                  >
                  <el-button icon="iconfont iconfenxiang" circle></el-button>
                  <el-button icon="iconfont iconpinglun" circle></el-button>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div
          v-if="commentsLength > 0 || hotCommentLength > 0"
          class="pagination"
        >
          <el-pagination
            background
            @current-change="getVideoComment"
            layout="prev, pager, next"
            :total="Math.ceil(total / 20) * 10"
          >
          </el-pagination>
        </div>
        <div v-else>
          <el-empty description="暂无评论"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getVideoCollect,
  getVideoInfo,
  getVideoUrl,
  getVideoCount,
  getVideoComment,
  getVideoRecommend,
  giveLike,
} from "util/video.js";
import { Follow } from "util/login";
import { mapGetters } from "vuex";
import { getCommentLike } from "util/songListPage";

export default {
  name: "",
  components: {},
  mounted() {
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });
  },
  data() {
    return {
      currentId: this.$route.params.id,
      videoInfo: {},
      creator: {},
      info: {},
      url: {},
      count: {},
      comment: {},
      commentsLength: "",
      hotComment: [],
      hotCommentLength: "",
      result: [],
      total: "",
      isLike: false,
      isCollect: false,
    };
  },
  created() {
    this.getVideoInfo(),
      this.getVideoUrl(),
      this.getVideoCount(),
      this.getVideoComment(1),
      this.getVideoRecommend();
  },
  computed: {
    ...mapGetters("userInfo", ["loginStatus"]),
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    //获取视频基本信息
    async getVideoInfo() {
      let {
        data: { data },
      } = await getVideoInfo(this.currentId);
      // console.log(data);
      this.creator = data.creator;
      this.videoInfo = data;
      this.getVideoComment(1);
    },
    //获取视频url
    async getVideoUrl() {
      let {
        data: { urls },
      } = await getVideoUrl(this.currentId);
      this.url = urls[0].url;
    },
    //获取评论信息
    async getVideoCount() {
      let { data } = await getVideoCount(this.currentId);
      // console.log(data);
      this.info = data;
    },
    //获取评论数据
    async getVideoComment(page) {
      let { data } = await getVideoComment(this.currentId, 20, (page - 1) * 20);
      if (page == 1) {
        this.comment = data;
        this.commentsLength = data.comments.length;
        this.hotCommentLength = data.hotComments.length;
      } else {
        this.comment.comments = data.comments;
      }
      this.total = data.total;
    },

    //获取相关视频
    async getVideoRecommend() {
      let {
        data: { data },
      } = await getVideoRecommend(this.currentId);
      this.result = data;
    },
    //跳转
    toDetail(id) {
      this.$router.push("/videoDetail/" + id);
      this.$store.dispatch("musicPlay/saveIsPlaying", false);
    },
    toUser(id) {
      this.$router.push("/userInfo/" + id);
    },
    // 关注功能
    async follow(id) {
      let { data } = await Follow(id, 1);
      if (data.code == "200") {
        this.$message(data.followContent);
        this.creator.followed = true;
      }
    },
    //点赞功能
    async giveLike(id, type) {
      let { data } = await giveLike(5, type, id);
      if (data.code == "200" && type === 1) {
        this.$message({
          message: "已赞",
          offset: 300,
          center: true,
        });
        this.isLike = true;
      } else {
        this.$message({
          message: "已取消赞",
          offset: 300,
          center: true,
        });
        this.isLike = false;
      }
    },
    //收藏功能
    async collect(id, type) {
      let { data } = await getVideoCollect(id, type);
      if (data.code == "200" && type === 1) {
        this.$message({
          message: "收藏成功",
          offset: 300,
          center: true,
        });
        this.isCollect = true;
      } else {
        this.$message({
          message: "取消收藏",
          offset: 300,
          center: true,
        });
        this.isCollect = false;
      }
    },
    //分享功能
    share() {
      this.$message({
        message: "此功能后续开发中，敬请期待哦",
        offset: 300,
        center: true,
      });
    },
    //全部评论点赞
    async getCommentLike(cid, type, index) {
      let { data } = await getCommentLike(this.$route.params.id, cid, type, 5);
      if (data.code == "200" && type === 1) {
        this.comment.comments[index].liked = true;
        this.comment.comments[index].likedCount += 1;
      } else {
        this.comment.comments[index].liked = false;
        this.comment.comments[index].likedCount -= 1;
      }
    },
    //热门评论点赞
    async getHotCommentLike(cid, type, index) {
      let { data } = await getCommentLike(this.$route.params.id, cid, type, 5);
      if (data.code == "200" && type === 1) {
        this.comment.hotComments[index].liked = true;
        this.comment.hotComments[index].likedCount += 1;
      } else {
        this.comment.hotComments[index].liked = false;
        this.comment.hotComments[index].likedCount -= 1;
      }
    },
  },
};
</script>

<style scoped lang='less'>
.video_container {
  padding: 2rem 3.5rem;
  div {
    video {
      width: 100%;
      object-fit: fill;
      border-radius: 20px;
      // height: 36rem;
    }
  }
  .creator_info {
    margin-bottom: 30px;
    .name {
      font-size: 22px;
      font-weight: 600;
      margin-top: 16px;
      display: flex;
      align-items: center;
      .iconfont {
        font-size: 22px;
        margin-left: 10px;
      }
      .iconfont:hover {
        transform: scale(1.1);
      }
    }
    .timer {
      margin-top: 16px;
      font-size: 13px;
      color: rgba(56, 51, 51, 0.795);
    }
  }
  .video_more {
    .title {
      font-size: 18px;
      font-weight: 600;
      margin: 10px 10px;
    }
    .video_wrap {
      display: grid;
      justify-content: space-around;
      grid-template-columns: repeat(auto-fill, 12.25rem);

      .item_wrap {
        width: 11.25rem;
        .item {
          margin-bottom: 20px;
          .cover {
            position: relative;
            height: 6.75rem;
            .el-image {
              width: 100%;
              height: 100%;
              border-radius: 13px;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
                0 0 6px rgba(0, 0, 0, 0.04);
            }
            .count {
              position: absolute;
              font-size: 8px;
              z-index: 5;
              top: 2%;
              right: 2%;
              color: #fff;
            }
            .el-icon-caret-right {
              font-size: 15px;
            }
            .time {
              position: absolute;
              font-size: 8px;
              z-index: 5;
              bottom: 2%;
              right: 2%;
              color: #fff;
            }
          }
          .title {
            font-size: 15px;
            font-weight: 600;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .name {
            font-size: 10px;
            color: #6e6e69;
          }
        }
      }
    }
  }
}

.comment-wrapper {
  padding: 0 3.5rem;

  .title {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    span {
      color: rgb(156, 149, 149);
      font-size: 13px;
    }
  }
}
.comment-wrap {
  padding: 20px;
  font-size: 20px;
  font-weight: 600;
  color: #5d356d;
  p {
    padding: 10px 0;
  }
}
.comment-wrap ul li {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
  margin-right: 50px;
}
.comment-wrap .cover {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #eee;
}
.comment-wrap .cover img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.comment-wrap .content {
  margin-left: 10px;
  width: 100%;
}
.footer {
  display: flex;
  justify-content: space-between;
  padding-right: 1.35rem;
  .time {
  }
  .button {
    .el-button {
      font-size: 10px;
      border: none;
      padding: 0;
      margin-right: 10px;
    }
    .active {
      color: red;
    }
  }
}
.comment-wrap .content .user-name {
  color: #44cef6;
  font-size: 13px;
  margin-top: -3px;
  margin-bottom: 7px;
}
.comment-wrap .content .info {
  line-height: 20px;
  color: #807171;
  font-size: 12px;
}
.comment-wrap .content .time {
  margin-top: 5px;
  color: rgb(136, 129, 129);
  font-size: 11px;
}
.recommend-wrap {
  width: 31.25rem;
  margin-top: 1.875rem;
  .recommend {
    display: flex;
    margin-bottom: 20px;
    .img {
      width: 12.5rem;
      height: 5rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }
    .title {
      margin-left: 0.625rem;
      .mv-name {
        width: 21.875rem;
        font-size: 15px;
        font-weight: normal;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .name {
        font-size: 12px;
        color: rgb(158, 141, 141);
      }
    }
  }
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ec4141;
  color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:hover {
  color: #ec4141;
}
</style>